網頁的軀幹:HTML

2019 iT 邦幫忙鐵人賽

DAY 7

自我挑戰組

前端成長日記系列第 7 篇

2019鐵人賽

aaa

2018-10-22 01:03:54

1023 瀏覽

分享至

今天開始會進入前端技術的各個環節，並配置一些簡單的實作。
如果想知道前端技能地圖，可以參考前兩天的文章：
課程地圖(上)
課程地圖(下)

HTML全稱叫做超文件標記語言(Hyper Text Markup Language)，是由許多角括號前後包住的「標籤」(Tag)組成，我們直接來看範例吧！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML測試</title>
</head>
<body>
	<h1>標題一</h1>
	<h2>標題二</h2>
	<div>佔行元素</div>
	<span>行內元素</span>
	<a href="http://google.com">超連結</a>
	<table>
		<tr><td>11</td><td>12</td></tr>
		<tr><td>21</td><td>22</td></tr>
		<tr><td>31</td><td>32</td></tr>
	</table>
</body>
</html>

1.把上面這段HTML code複製貼到記事本，將檔案另存成index.html(檔名任意英文數字，副檔名.html)，使用瀏覽器開啟記事本，這時就已經做出了一個網頁！

2.任意修改中文字，將瀏覽器刷新，這時候網頁內容也會改變

3.<!DOCTYPE html>告訴瀏覽器，這是一個html文件

4.<head>...</head>之間包住的區塊，紀錄一些網頁資訊，例如內的文字會顯示在頁籤上。之後引入CSS樣式設定也會寫在這邊。

5.<body></body>則是會呈現在瀏覽器的內容囉！之後引入JS程式碼的標籤會放在這裡

HTML看似簡單，但是在大型的頁面架構中，也可以變得相當複雜。